<!--
 * @Description  : 个人中心
 * @Author       : MengFan Shan
 * @Date         : 2023-02-23
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-03-11
-->
<template>
  <AppPage class="bg-[#f3f4f1]" :header-class="'bg-[#f4f4f4]'" :right-icon="{ icon: 'eos-icons:abstract-instance', size: 32, path: 'setting' }">
    <div p-20 flex items-center bg-white rd-20>
      <nut-image src="//07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" width="80" height="80" round />
      <div ml-10>
        <h3>{{ userStore.userInfo.nickName || '桑梓讲故事用户' }}</h3>
        <div class="color-[#aaaaa8] text-12">注册时间: {{ userStore.userInfo.createDate }}</div>
      </div>
    </div>

    <h4 class="mt-30 text-18 fw-400">我的账户</h4>
    <div flex flex-wrap justify-between items-center>
      <div v-for="(item, index) in accountTabList" :key="index" mt-20>
        <router-link :to="item.to">
          <div rd-10 bg-white w-28vw h-28vw py-10 pl-10>
            <div text-14 pb-8vw>{{ item.title }}</div>
            <TheIcon :icon="item.icon" :size="28" />
          </div>
        </router-link>
      </div>
    </div>

    <h4 class="mt-30 text-18 fw-400">我的笔记</h4>
    <div flex flex-wrap justify-between items-center>
      <div v-for="(item, index) in bookshelfTabList" :key="index" mt-20 @click="changeBookshelf(index)">
        <div rd-10 w-28vw h-28vw py-10 pl-10 :class="bookshelfTab === index ? 'bg-[#fcd006]' : 'bg-white'">
          <div text-14 pb-8vw>{{ item.title }}</div>
          <TheIcon :icon="item.icon" :size="28" />
        </div>
      </div>
    </div>

    <nut-divider :style="{ color: '#d8d8d8' }" />
    <p class="content">{{ bookshelfTab === 0 ? '您拥有的书籍' : bookshelfTab === 1 ? '您收藏的书籍' : '您借阅的书籍' }}</p>
    <div flex flex-wrap mt-30>
      <div v-for="(collectionWorks, index) in collectionWorksList" :key="index" m-r-4vw @click="toDetail(collectionWorks.moduleWorksId, collectionWorks.worksName)">
        <nut-image :src="collectionWorks.imgUrl" width="26vw" height="28vw" radius="8"></nut-image>
        <p class="text-12 my-10 text-left mx-auto ext-ellipsis--l1">{{ collectionWorks.worksName }}</p>
      </div>
    </div>
  </AppPage>
</template>

<script setup>
import { useUserStore } from '@/store'
import { selCollectionWorksList } from '@/api/auth'
import { isEmpty } from '~/src/utils/common'

onMounted(() => {
  changeBookshelf(0)
})

const router = useRouter()
const userStore = useUserStore()
const collectionWorksList = ref([])
const accountTabList = ref([
  { title: '笔记', to: 'my-note', icon: 'ic:twotone-library-books' },
  { title: '订单', to: 'my-order', icon: 'zondicons:edit-copy' },
  { title: '消息', to: 'my-message', icon: 'clarity:chat-bubble-outline-badged' }
])

const bookshelfTabList = ref([
  { title: '拥有', icon: 'zondicons:map' },
  { title: '收藏', icon: 'zondicons:heart' },
  { title: '借阅', icon: 'zondicons:heart' }
])
const bookshelfTab = ref(0)

/** 修改我的书架 tab */
const changeBookshelf = value => {
  bookshelfTab.value = value
  if (bookshelfTab.value === 0) {
  }
  if (bookshelfTab.value === 1) {
    getCollectionWorksList()
  }
}

/**
 * 获取作品收藏列表
 */
const getCollectionWorksList = async () => {
  if (!isEmpty(userStore.phoneNumber)) {
    const result = await selCollectionWorksList(userStore.phoneNumber)
    collectionWorksList.value = result.data
  }
}

/**
 * 前往作品详情页
 */
const toDetail = (moduleWorksId, worksName) => {
  router.push({ name: 'worksDetail', query: { moduleWorksId, worksName } })
}
</script>

<style lang="scss"></style>
